<template>
  <div
    class="check_warpper"
    @mouseenter.stop="onMouseOver"
    @mouseleave.stop="onMouseLeave"
    @click.stop="handleExam"
  >
    <template v-if="exam.status === 'basic' || exam.status === 'edit'">
      <div :class="`check_content_${exam.status}`" class="check_content">
        <div class="check_stem">
          <!-- 标题组件 -->
          <Stem
            :require="exam.require"
            :questNum="exam.questNum"
            :examList="examList"
            :title="exam.title"
            :extraName="extraName"
          />
        </div>
        <!-- 单选组 -->
        <a-checkbox-group
          v-model:value="defaultValue"
          :style="checkStyle"
          @change="onChange"
        >
          <template v-for="item in exam.options" :key="item.displayOrder">
            <a-checkbox :value="item.displayOrder" :style="itemStyle">
              {{ item.content }}
            </a-checkbox>
          </template>
        </a-checkbox-group>
      </div>

      <div class="hover_warpper">
        <template v-if="hover">
          <EditinExam :questNum="exam.questNum" :exam="exam" />
        </template>
      </div>
    </template>

    <template v-else-if="exam.status === 'answer'">
      <!-- <div>{{ exam.questNum + 1 }}</div> -->
      <a-form-item
        :class="`check_content_${exam.status}`"
        class="check_content"
        :label="`${exam.questNum}. ${matchReg(exam.title)}`"
        :name="[exam.questNum - 1, 'answerChose']"
        :rules="{
          required: true,
          message: `请选择${matchReg(exam.title)}`,
          trigger: 'change',
          type: 'array',
        }"
      >
        <a-checkbox-group
          v-model:value="exam.answerChose"
          :style="checkStyle"
          @change="onChange"
        >
          <template v-for="item in exam.options" :key="item.displayOrder">
            <a-checkbox :value="item.displayOrder" :style="itemStyle">
              {{ item.content }}
            </a-checkbox>
          </template>
        </a-checkbox-group>
      </a-form-item>
    </template>

    <template v-else-if="exam.status === 'statistics'">
      <div :class="`check_content_${exam.status}`" class="check_content">
        <div class="check_stem">
          <!-- 标题组件 -->
          <Stem
            :require="exam.require"
            :questNum="exam.questNum"
            :title="exam.title"
          />
        </div>
        <!-- 单选组 -->
        <OptionResult :data="exam.chooseInfos" />
      </div>
    </template>

    <template v-else-if="exam.status === 'unknow'"> unknow </template>

    <template v-if="exam.status === 'edit'">
      <ExitExamForSelect
        :exam="exam"
        :examList="examList"
        @mouseenter.stop="onMouseLeave"
        @mouseleave.stop="onMouseOver"
      />
    </template>
  </div>
</template>
<script lang="ts">
import { matchReg } from '@/library/util/remove-label';
import { ExamItem, QuestsType } from '@/store/design/types';
import { computed, defineComponent, reactive, ref } from 'vue';
import EditinExam from './common/EditinExam.vue';
import ExitExamForSelect from './common/ExitExamForSelect.vue';
import Stem from './common/Stem.vue';
import OptionResult from './common/OptionResult.vue';

export default defineComponent({
  components: { EditinExam, ExitExamForSelect, Stem, OptionResult },
  props: {
    exam: { type: ExamItem, required: true },
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
  },
  emits: ['handleExam'],
  setup(props, { emit }) {
    const checkStyle = reactive({
      display: 'flex',
      flexDirection: 'column',
      width: '230px',
    });

    const itemStyle = reactive({
      height: '30px',
      lineHeight: '30px',
    });
    const defaultValue = ref<null>(null);

    const onChange = () => {
      defaultValue.value = null;
    };

    const hover = ref<boolean>(false);

    const onMouseOver = () => {
      if (props.exam.status === 'edit') {
        hover.value = false;
      } else {
        hover.value = true;
      }
    };

    const onMouseLeave = () => {
      if (props.exam.status === 'edit') {
        hover.value = false;
      } else {
        hover.value = false;
      }
    };

    const handleExam = () => {
      if (props.exam.status === 'edit') {
        hover.value = true;
      } else {
        hover.value = false;
      }
      emit('handleExam', props.exam);
    };

    const extraName = computed<string>(() => {
      let result = '';
      (props.examList as QuestsType[]).map((item: QuestsType) =>
        item.types.map((type) => {
          if (type.id === props.exam.typeId) {
            result = type.typeName;
          }
        }),
      );

      return result;
    });

    return {
      checkStyle,
      onMouseOver,
      hover,
      onMouseLeave,
      handleExam,
      defaultValue,
      onChange,
      extraName,
      itemStyle,
      matchReg,
    };
  },
});
</script>
<style lang="less" scoped>
.check_warpper {
  border-bottom: 1px solid @border-color;
  .check_content {
    padding: 30px 36px 0;
  }
  .hover_warpper {
    width: 100%;
    height: 49px;
    padding: 12px 12px 12px 0;
    display: flex;
    justify-content: flex-end;
  }
  :global(.ant-checkbox-wrapper) {
    margin-left: 0 !important;
  }
}
</style>
